/*
 *@description: 帮助页面
 *@Author:@reynold
 *@Date:2025-03-25 11:37:30
 *@Update:2025-03-25 11:37:30
 *@Version: V1.0.0
*/
<template>
  <div class="help-container">
    <h2>使用帮助</h2>
    <!-- 常见问题部分 -->
    <div class="section">
      <h3>常见问题</h3>
      <ul class="question-list">
        <li v-for="(question, index) in commonQuestions" :key="index" @click="showDialog('常见问题: ' + question)">
          {{ question }}
        </li>
      </ul>
    </div>

    <!-- 更多问题部分 -->
    <div class="section">
      <h3>更多问题</h3>
      <div class="category-list">
        <div v-for="(category, index) in moreCategories" :key="index" @click="showDialog(category)">
          {{ category }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Dialog } from 'vant'; // 引入 vant 的 Dialog 组件

// 常见问题内容
const commonQuestions = [
  "如何注册账户？",
  "忘记密码怎么办？",
  "如何修改个人信息？",
  "如何查看订单状态？"
];

// 更多问题分类
const moreCategories = [
  "账户管理",
  "商品信息",
  "物流配送",
  "售后服务",
  "支付方式"
];

// 弹出提示框的方法
const showDialog = (content) => {
  let message;
  
  // 根据点击的内容显示不同的提示
  switch(content) {
    case '账户管理':
      message = '提示1: 这里是关于账户管理的信息。';
      break;
    case '商品信息':
      message = '提示2: 这里是关于商品信息的说明。';
      break;
    case '物流配送':
      message = '提示3: 这里是关于物流配送的说明。';
      break;
    case '售后服务':
      message = '提示4: 这里是关于售后服务的详细信息。';
      break;
    case '支付方式':
      message = '提示5: 这里是关于支付方式的帮助信息。';
      break;
   
    default:
      message = '提示: 如何注册账户？';
  }

  // 弹出提示框
  Dialog.alert({
    title: '提示',
    message: message,
  });
};
</script>

<style scoped>
.help-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #555;
}

.section {
  margin-bottom: 30px;
}

.question-list {
  padding-left: 20px;
  list-style-type: none;
}

.question-list li {
  cursor: pointer;
  margin-bottom: 10px;
  padding: 12px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, transform 0.3s;
}

.question-list li:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.category-list div {
  background-color: #fff;
  padding: 12px 15px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.category-list div:hover {
  background-color: #53671c;
  transform: translateY(-2px);
}
</style>